//添加歌手的html页面渲染
function  addSinger(){
    //html数据渲染
    $('#box').html(`
                    <!-- Page Header -->
                      <div class="page-header">
                        <div class="row align-items-center">
                          <div class="col">
                            <h3 class="page-title">添加歌手</h3>
                            <ul class="breadcrumb">
                              <li class="breadcrumb-item"><a href="/admin/dataAnalysis">首页</a></li>
                              <li class="breadcrumb-item active">添加歌手</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                      <!-- /Page Header -->
                      <div class="row">
                        <div class="col-sm-12">
                          <div class="card">
                            <div class="card-body">
                              <form onsubmit="return false" id="from"  name="from" enctype="multipart/form-data">
                                <div class="row">
                                  <div class="col-12">
                                    <h5 class="form-title"><span>请输入歌手信息</span></h5>
                                  </div>
                                  <div class="col-12 col-sm-6">
                                    <div class="form-group">
                                      <label>姓名</label>
                                      <input type="text" id="singerName" name="singerName">
                                    </div>
                                  </div>
                                  <div class="col-12 col-sm-6">
                                    <div class="form-group">
                                      <label>年龄</label>
                                      <input type="text" id="singerAge" name="singerAge">
                                    </div>
                                  </div>
                                  <div class="col-12 col-sm-6">
                                    <div class="form-group">
                                      <label>简介</label>
                                      <input type="text" id="singerDescribe" name="singerDescribe">
                                    </div>
                                  </div>
                                  <div class="col-12 col-sm-6">
                                    <div class="form-group">
                                      <label>封面</label>
                                      <input type="file" id="headerImg" name="mulHeaderImg">
                                    </div>
                                  </div>
                                  <div class="col-12">
                                    <button type="submit" class="btn btn-primary"  id="addBtn" onclick="addSingers()">添加</button>
                                  </div>
                                </div>
                              </form>
                            </div>
                          </div>
                        </div>
                      </div>
            `);
}
//添加歌手
function addSingers(){
    var form = $('#from')[0];
    var formData = new FormData(form);
    $.ajax({
        url:"/singer/addSinger",
        type: "post",
        dataTable: "json",
        data:formData,
        processData: false, // 告诉jQuery不要处理数据
        contentType: false, // 告诉jQuery不要设置Content-Type请求头
        success: function (data) {
            alert("添加成功")
            addSinger();
        }
    })
}


//查询歌手信息
function searchSinger(startIndex,size){
    var searchName=$('#singerName').val();
    if (searchName==undefined){
        searchName='null';
    }
    console.log(11);
    $.ajax({
        url:'/singer/searchSinger',
        type:'get',
        dataType:'json',
        data:{
            startIndex:startIndex,
             size:size,
            str:searchName
        },
        success:(res)=>{
            let str=``;
            let list=res.data.records;
            console.log(list);
            for (let i=0;i<list.length;i++){
                console.log(list[i].headerImg);
                if (list[i].singerAge==null){
                    list[i].singerAge="";
                }
                str+=`
                        <tr>
                          <td class="text-left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="delList" value="${list[i].id}" ></td>
                          <td>${list[i].id}</td>
                          <td><h2><a>${list[i].singerName}</a></h2></td>
                          <td style="color: deepskyblue"><img  style="width: 80px;height: 40px" src="${list[i].headerImg}"></td>
                          <td style="color: deeppink">${list[i].singerAge}</td>
                          <td><div class="actions"><a href="javascript:void()" onclick="deleteSinger(${list[i].id})" class="btn btn-sm bg-danger-light"><i class="fas fa-trash"></i></a></div></td>
                        </tr>
                     `;
            }
                //定义一个分页
            let page=[];
            let before='#';
            let after='#';
            let pages='';
            if (res.data.pages>3 && res.data.current+2<=res.data.pages){
                page=[res.data.current,res.data.current+1,res.data.current+2];
            }else if (res.data.pages>3 && res.data.current+2>res.data.pages){
                page=[res.data.pages-2,res.data.pages-1,res.data.pages];
            }else {
                for (let i=0;i<res.data.pages;i++){
                    page[i]=i+1
                }
            }
            for (let i=0;i<page.length;i++){
                pages+=`<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="searchSinger(${page[i]},${size})">${page[i]}</a></li>`
            }
            if (res.data.current >1){
                before='searchSinger('+(res.data.current-1)+','+size+')';
            }
            if (res.data.current<res.data.pages){
                after='searchSinger('+(res.data.current+1)+','+size+')';
            }

           // 开始渲染数据
            $('#box').html(`
                <div class="page-header">
                  <div class="row align-items-center">
                    <div class="col">
                      <h3 class="page-title">歌手信息</h3>
                      <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/admin/dataAnalysis">首页</a></li>
                        <li class="breadcrumb-item active">歌手信息</li>
                      </ul>
                    </div>
                  </div>
                </div>


                <!-- /Page Header -->
                <div class="row">
                  <div class="col-sm-12">
                    <div class="card card-table">
                      <div class="card-body">
                        <div class="table-responsive">
                          <div class="top-nav-search">
                            <form onsubmit="return false">
                              <input type="text" class="form-control" placeholder="请输入歌手姓名" id="singerName"  name="singerName" >
                              <button class="btn" onclick="searchSinger(1,5)"><i class="fas fa-search"></i></button>
                            </form>
                          </div>
                          <table class="table table-hover table-center mb-0 datatable">
                            <thead>
                              <tr>
                                <th><a href="javascript:void(0)" onclick="deleteSingers()" class="btn btn-sm bg-danger-light"><span style="color: red">批量删除</span></i></th>
                                <th>ID</th>
                                <th>姓名</th>
                                <th>头像</th>
                                <th>年龄</th>
                                <th>删除</th>
                              </tr>
                            </thead>
                            <tbody>
                                ${str}
                            </tbody>
                          </table>
                        </div>
                        <div style="text-align: right;margin-top: 20px">
                            <div style="float: left;display: inline-block">
                                总记录数: <span style="color: purple">${res.data.total} </span> ,
                                总页数: <span style="color: #0e72a2"> ${res.data.pages} </span>,
                                当前页: <span style="color: red">${res.data.current}</span>
                            </div>
                            <div style="display: inline-block;margin-right:100px">
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination">
                                      <li class="page-item">
                                        <a class="page-link" href="javascript:void(0)" onclick="${before}" aria-label="Previous">
                                          <span aria-hidden="true">&laquo;</span>
                                        </a>
                                      </li>
                                      ${pages}
                                      <li class="page-item" onclick="${after}">
                                        <a class="page-link" href="javascript:void(0)" onclick="${after}" aria-label="Next">
                                          <span aria-hidden="true">&raquo;</span>
                                        </a>
                                      </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            `);
        }
        },)
}




//根据id删除歌手
    function deleteSinger(id) {
        $.ajax({
            url: '/singer/deleteSinger/'+id,
            type: 'delete',
            dataType: 'json',
            success:function (res) {
                searchSinger(1,12);
            }
        })
    }
//批量删除
//测试
    function deleteSingers() {
        var checkID = [];//定义一个空数组
        $("input[name='delList']:checked").each(function (i) {//把所有被选中的复选框的值存入数组
            checkID[i] = $(this).val();
        });
        for (var i = 0; i < checkID.length; i++){
            console.log(checkID[i]);
            deleteSinger(checkID[i]);
        }
    }